<template>
    <div>
        <el-divider content-position="left">Item操作</el-divider> 
        <el-form :inline="true" :model="formData">
            <el-form-item label="选择报价单：">
                <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户信息："></el-form-item>
            <el-form-item label="套数："></el-form-item>
            <div style="float: right;">
                <el-button type="primary">导出BOM</el-button>
                <el-button type="primary">导出报价单</el-button>
            </div>
        </el-form>
        <el-tabs type="border-card">
            <el-tab-pane label="Item Detail">
                <div style="display: flex;">
                    <el-form label-width="100px" style="width: 40%; margin-right: 20px;" v-model="formData">
                        <el-form-item label="Item:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Basic Item:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Unit Price:">
                            <el-input style="width: 300px;" v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="QTY:">
                            <el-input style="width: 300px;" v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="Sub TTL:">
                            <el-input style="width: 300px;" v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="其他描述:">
                            <el-input style="width: 300px;" v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                    <vue-table :tableData="tableData" :tableHeade="tableHeade"></vue-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="设计信息">
                <el-form :disabled="true">
                    <div style="display: flex; justify-content: space-around;">
                        <el-form-item label="ATE Platform：" style="margin-right: 10px;">
                            <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Pitch：" style="margin-right: 10px;">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="PCB layer：" style="margin-right: 10px;">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="PCB size：">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Back Drilling:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Ultra-Flat Process:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Lamination:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Impedance Control+/-5%:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Drill ratio:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="laser Drill:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="采购类型:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Thin Core Technology:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Material:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Stiffener:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <div style="width: 100%; text-align: center; margin-top: 10px;">
            <el-button type="primary">提交</el-button>
            <el-button @click="back">上一步</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import useApplicationCenterStore from '@/store/modules/applicationCenter'
let applicationCenter = useApplicationCenterStore()
let formData = reactive({
    name: '',
    region: ''
})
let options1 = [
    { value: '选项1', label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须糖' },
    { value: '选项5', label: '北京烤鸭' }
];
const tableHeade = reactive([
  { prop: 'tmName', label: 'ID' },
  { prop: 'userNumber', label: 'QuotationID', width: '110' },
  { prop: 'userNumber', label: 'QuotationType', width: '130' },
  { prop: 'userNumber', label: 'QuotationModel', width: '140' },
  { prop: 'userNumber', label: 'MaterialCatgory', width: '140' },
  { prop: 'userNumber', label: 'SiteUsage', width: '110' },
  { prop: 'userNumber', label: 'CompleteUsage', width: '140' },
  { prop: 'userNumber', label: 'NumberOfSets', width: '140' },
  { prop: 'userNumber', label: 'SummaryUsage', width: '140' },
  { prop: 'userNumber', label: 'MOQ', width: '110' },
  { prop: 'userNumber', label: 'SimplePrice', width: '110' },
  { prop: 'userNumber', label: 'SIPIRequest', width: '110' },
  { prop: 'userNumber', label: 'SummaryPrice', width: '200' },
  { prop: 'userNumber', label: 'Remark', width: '130'},
  { prop: 'userNumber', label: 'Creater' },
  { prop: 'userNumber', label: 'CreateDate', width: '110' },
  { prop: 'userNumber', label: 'Updater', width: '110' },
  { prop: 'userNumber', label: 'UpdateDate', width: '110' }
])
let tableData = reactive([{}])
const back = () => {
    applicationCenter.active = 2
}
</script>
<style scoped lang="scss">
.itemWidth {
    width: 155px;
}
.flex {
    display: flex;
    justify-content: space-between;
}
</style>
